var video = $("video").get(0);

function formatTime(time) {
    // 思想：取余得出时分秒
    // .floor 向上取整
    var h = Math.floor(time / 3600);
    var m = Math.floor(time % 3600 / 60);
    var s = Math.floor(time % 60);

    return (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);


}

// 显示时间
video.oncanplay = function() {
    $("video").show();
    console.log(video.duration);
    var totalTime = formatTime(video.duration);
    console.log(totalTime);
    $(".total").html(totalTime);
}

// 视频播放和暂停效果
$(".switch").on("click", function() {
    if ($(this).hasClass("fa-play")) {
        video.play();
        $(this).addClass("fa-pause").removeClass("fa-play");

    } else {
        video.pause();
        $(this).addClass("fa-play").removeClass("fa-pause");
    }
})

//核心代码示例
var DragDis = 0
var PRocessWidth = 100 //拖拽条总长
$('body').mousedown(function(e) {
    startX = e.clientX
    dragDis = startX - leftInIT //leftInit为拖拽条起始点巨屏幕左侧的距离
    dragTarget.css({ //拖拽按钮
        left: dragDis
    })
    dragProcess.css({ //进度条(蓝色进度条)
        width: dragDis
    }) // 令进度条和拖拽按钮渲染在同一位置
    videoSource.pause()
}).mouSEMove(function(e) {
    moveX = e.clientX
    disX = moveX - startX
    var left = dragDis + disX
    if(left > processWidth) {
        left = processWidth
    } else if(left < 0) {
        left = 0
    }
    dragTarget.css({
        left: left
    })
    dragProcess.css({
        width: left
    })
}).mouseup(function(e) {
    videoSource.play()
    videoSource.currentTime = $('蓝色拖拽条').width() / processWidth * duration //拖拽后计算视频的正确播放位置
})